var mapChart = echarts.init(document.getElementById('ec_map_nd'));

$(function(){
	
	getCdnResSurveyMap('企业');
	
	$(".mapChange").change(function(){
	    var type = $(this).val();
	    getCdnResSurveyMap(type);
	})
	
	//各省CDN IP节点
	getCdnResSurveyRight1Tab1();
	
	//各企业CDN IP节点
	getCdnResSurveyRight2Tab1();
	
	$(".proCDN .tab_classify li").click(function(){
		$(this).addClass("active").siblings().removeClass("active")
		 var n=$(this).index()
		 if(n==0){
			//各省CDN IP节点
			 getCdnResSurveyRight1Tab1();
		 }else if(n==1){
			 //各省CDN企业
			 getCdnResSurveyRight1Tab2();
		 }else if(n==2){
			 //各省CDN加速域名
			 getCdnResSurveyRight1Tab3();
		 }
	})
	$(".comCDN .tab_classify li").click(function(){
		$(this).addClass("active").siblings().removeClass("active")
		 var n=$(this).index()
		 if(n==0){
			 //各企业CDN IP节点
			 getCdnResSurveyRight2Tab1();
		 }else if(n==1){
			 //各企业CDN加速域
			 getCdnResSurveyRight2Tab2();
		 }
	})
});

function getCdnResSurveyMap(type){
	$.ajax({
		type : "POST",
		url :  "nationalCdnResSurvey/getCdnResSurveyMap",
		data : {
			"type" : type
		},
		dataType : "json",
		success : function(data) {
			if (data.flag) {
				var mapData = data.mapData;
				var max = data.max;
				var optionMap = getOptionMap(mapData,max,type);
				mapChart.setOption(optionMap);
			}
		}
	});
}

function getCdnResSurveyRight1Tab1(){
	$.ajax({
		type : "POST",
		url :  "nationalCdnResSurvey/getCdnResSurveyRight1Tab1",
		dataType : "json",
		success : function(data) {
			if (data.flag) {
				var datas = data.datas;
				barEVT(datas,".proCDN");
			}
		}
	});
}

function getCdnResSurveyRight1Tab2(){
	$.ajax({
		type : "POST",
		url :  "nationalCdnResSurvey/getCdnResSurveyRight1Tab2",
		dataType : "json",
		success : function(data) {
			if (data.flag) {
				var datas = data.datas;
				barEVT(datas,".proCDN");
			}
		}
	});
}

function getCdnResSurveyRight1Tab3(){
	$.ajax({
		type : "POST",
		url :  "nationalCdnResSurvey/getCdnResSurveyRight1Tab3",
		dataType : "json",
		success : function(data) {
			if (data.flag) {
				var datas = data.datas;
				barEVT(datas,".proCDN");
			}
		}
	});
}

function getCdnResSurveyRight2Tab1(){
	$.ajax({
		type : "POST",
		url :  "nationalCdnResSurvey/getCdnResSurveyRight2Tab1",
		dataType : "json",
		success : function(data) {
			if (data.flag) {
				var datas = data.datas;
				barEVT(datas,".comCDN");
			}
		}
	});
}

function getCdnResSurveyRight2Tab2(){
	$.ajax({
		type : "POST",
		url :  "nationalCdnResSurvey/getCdnResSurveyRight2Tab2",
		dataType : "json",
		success : function(data) {
			if (data.flag) {
				var datas = data.datas;
				barEVT(datas,".comCDN");
			}
		}
	});
}

//列表数据
function barEVT(listData,ele){
	var max=0
	for(var i=0;i<listData.length;i++){
		if(max <= listData[i].value){
			max = listData[i].value;
		}
	}
	for(var i=0;i<listData.length;i++){
		//listData[i].per=(listData[i].value/max)*100+"%"
		var value = (listData[i].value/max)*100;
		if(value < 1){
			value = 1;
		}
		listData[i].per = value + "%";
	}
	$(ele).find(".barList").html("")
	for(var j=0;j<listData.length;j++){
		 $(ele).find(".barList").append("<li>"+
		   "<div style='color:#bed8e0'>"+(j+1)+"</div>"+
	       "<div title='"+listData[j].name+"' style='color:#bed8e0'>"+listData[j].name+"</div>"+
	       "<div><p class='progressbar_1'>" +
	       "<span class='progress' style=width:"+listData[j].per+"></span>" +
	       	"</p></div>"+
	       "<div title='"+listData[j].value+"' style='color:#bed8e0'>"+listData[j].value+"</div>"+
	       "</li>")
	}
}

var geoCoordMap={}
var mapFeatures = echarts.getMap('china').geoJson.features;
mapFeatures.forEach(function(v) {
    // 地区名称
    var name = v.properties.name;
    // 地区经纬度
    geoCoordMap[name] = v.properties.cp;
});
var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });
        }
    }
    return res;
};

function getOptionMap(data,max,type){
	var optionMap = {
		tooltip: {
			trigger: 'item',
			formatter: function(param) {
				var province = param.name;
				return '<div>' + param.name + '</div>' +
					'<div>' + type + '数量：' + param.data.value[2] + '</div>';
			}
		},
		geo: {
			show: true,
			zoom: 1.2,
			roam: false,
			map: 'china',
			itemStyle: {
				normal: {
					show: false,
					borderColor: '#285ac6',
					borderWidth: 1,
					areaColor: '#123082',
					shadowBlur: 3,
					shadowColor: '#081435',
					shadowOffsetX: -4,
					shadowOffsetY: 8
				},
				emphasis: {
					areaColor: '#fce24f',
					borderColor: '#fce24f'
				}
			}
		},
		series: [{
			type: 'map',
			zoom: 1.2,
			mapType: 'china',
			roam: false,
			label: {
				normal: {
					show: false,
					textStyle: {
						color: '#fff'
					}
				},
				emphasis: {
					show: true,
					textStyle: {
						color: '#fff'
					}
				}
			},
			itemStyle: {
				normal: {
					show: false,
					borderColor: '#3770ea',
					borderWidth: 1,
					areaColor: '#0f2d87'
				},
				emphasis: {
					areaColor: '#2a56bd',
					borderColor: '#2a56bd',
				}
			},
			data: convertData(data)
		}, {
			name: 'Top 5',
			type: 'effectScatter',
			zlevel: 1,
			coordinateSystem: 'geo',
			symbolSize: function(val) {
				return val[2] / max * 20 + 5
			},
			showEffectOn: 'render',
			rippleEffect: {
				brushType: 'stroke'
			},
			hoverAnimation: true,
			label: {
				normal: {
					position: 'right',
					show: false
				}
			},
			itemStyle: {
				normal: {
					color: '#f4e925',
					shadowBlur: 10,
					shadowColor: '#333'
				}
			},
			data: convertData(data.sort(function(a, b) {
				return b.value - a.value
			}).slice(0, 5))
		}, {
			name: 'Top 5',
			type: 'scatter',
			zlevel: 1,
			coordinateSystem: 'geo',
			symbolSize: function(val) {
				return val[2] / max * 10 + 5
			},
			showEffectOn: 'render',
			rippleEffect: {
				brushType: 'stroke'
			},
			hoverAnimation: true,
			label: {
				normal: {
					position: 'right',
					show: false
				}
			},
			itemStyle: {
				normal: {
					color: '#f4e925',
					shadowBlur: 10,
					shadowColor: '#333'
				}
			},
			data: convertData(data.sort(function(a, b) {
				return b.value - a.value;
			}).slice(5))
		}]
	};
	return optionMap;
}

window.addEventListener("resize", function () {
    mapChart.resize();
});
